<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <!-- 传统请求 -->
   <a href="/user">访问user</a>
    

  <!--  
    ajax：
        Asynchronous：异步执行结构
        JavaScript：ajax技术主要的实现代码，通过定义js代码完成和服务器请求交互
        And 
        XML：以对标签形式定义文本语法结构，描述数据关系，ajax技术出现时还没有JSON格式语法 
    -->
    <div id="mydiv"></div>
    <input type="button" value="加载user" onclick="loadUser()">
    <script>
        function loadUser(){
            // 客户端使用js提供的XMLHttpRequest构造函数，向服务器发送请求
            // 基于XMLHttpRequest构造函数，创建专门的异步请求对象
            let xhr=new XMLHttpRequest();
           

           /*  
            xhr.open(method, url) 为一个已创建的异步请求对象完成地址、请求类型、请求模式的初始化操作
            method:http的请求类型：get、post、put、delete.....
            url:请求地址 
            */
            xhr.open("get","/user");

            // 实现异步请求的 发送 操作
            xhr.send();

          /*   
            xhr.responseText返回响应的文本数据，完成数据的加载和渲染操作
            responseText的获取必须在ajax异步请求(请求时间+服务器执行时间+响应时间)完成后，才能获取数据
            如果请求未完成就调用responseText，则返回空字符串 */

            // setTimeout(function(){
            //     //因为时间不定义，计时器的定义并不能准确描述请求完成
            //     console.log(xhr.responseText);
            // },500);

            // xhr.onload=回调函数,可以在当前ajax请求执行完成后自动调用回调函数
            xhr.onload=function(){
                console.log(xhr.responseText);
                let dom=document.getElementById("mydiv");
                dom.innerHTML=xhr.responseText;
            };
        }
    </script>
</body>
</html>